<template>
  <VPage edit>
    <el-row :gutter="8">
      <el-col :span="8" class="min-w-[440px]">
        <Card title="业绩指标" class="flex-1 mb-[8px] min-w-[440px] overflow-hidden">
          <div class="flex h-[105px]" style="box-shadow: 0px 0px 10px 1px #eff3fe">
            <div class="w-[47px] flex items-center justify-center" v-if="performance.length > 1">
              <ArrowLeft class="w-[14px]" @click="onLeft" />
            </div>

            <div class="flex flex-1 relative performance-view">
              <div v-if="performance.length" class="flex">
                <div
                  class="flex justify-center flex-col min-w-[153px] relative after:content-[' '] after:absolute after:right-[0] after:w-[1px] after:h-[40px] after:bg-[var(--base-link-color)] px-[7px] last:after:hidden son-dom"
                  v-for="(item, idx) in performance"
                  :key="idx"
                >
                  <div class="text-[10px] leading-[14px]">
                    <div class="text-[10px] flex-1">
                      【{{ item.target_type == 1 ? "团队" : "个人" }}】
                      <span class="text-[10px]" v-if="item.target_type == 1">【{{ item.name }}】</span>
                      {{ item.indicator_type }} {{ item.indicator_type != "订单量" ? item.currency : "" }}
                    </div>

                    <p class="text-[12px] text-[#9DA1AD] mt-[4px]">{{ `${item.start_date}-${item.end_date}` }}</p>
                  </div>

                  <div class="text-[12px] leading-[18px] text-[var(--base-text-color)] mt-[4px] flex h-[25px]">
                    <span class="font-[600] min-w-[30px] text-right">
                      <span class="text-[18px]" v-if="item.unit == '¥'"><span class="text-[10px]">¥</span> {{ item.finish }}</span>
                      <span class="text-[18px]" v-else>{{ item.finish?.toLocaleString("en-US") }}<span class="text-[10px]"></span></span>
                    </span>
                    <span class="text-[var(--base-border-color)] px-[6px]">|</span>
                    <span class="text-[var(--base-sub-text-color)] text-[10px]"> {{ item.unit == "¥" ? "¥" : "" }}{{ item.target?.toLocaleString("en-US") }} </span>
                  </div>
                  <div class="text-[12px] leading-[14px] mt-[2px] mb-[16px] flex items-center" :class="item.is_finish ? 'text-[#67C23A]' : 'text-[#F56C6C]'">
                    <el-progress :percentage="item.achieving_rate" class="w-[100%] progress" :class="item.is_finished ? '' : 'progress-red'" />
                  </div>
                </div>
              </div>

              <div v-else class="flex justify-center items-center w-[100%]">
                <div class="text-center">
                  <p class="text-[#9da1ad]">暂未配置业绩指标</p>
                  <el-link type="primary" :underline="false" class="link-btn" @click="gotoPage">去配置</el-link>
                </div>
              </div>
            </div>

            <div class="w-[47px] flex items-center justify-center" v-if="performance.length > 1">
              <ArrowRight class="w-[14px]" @click="onRight" />
            </div>
          </div>
        </Card>
      </el-col>
      <el-col :span="8" class="min-w-[440px]">
        <Card title="待发货订单" class="flex-1 h-[150px] mb-[8px] min-w-[440px] overflow-hidden">
          <div class="flex h-[105px]" style="box-shadow: 0px 0px 10px 1px #eff3fe">
            <div
              v-for="(item, key) in deliveredOrder"
              :key="key"
              class="flex flex-1 items-center relative after:content-[' '] after:absolute after:right-[0] after:w-[1px] after:h-[40px] after:bg-[var(--base-link-color)] px-[16px] last:after:hidden w-[153px]"
              @click="gotoOrderPage(item)"
            >
              <span class="mr-[8px] icon-bg flex items-center justify-center">
                <svg-icon icon-class="daifahuo" class="text-[#fff] text-[16px]" />
              </span>
              <div>
                <div class="text-[#0a1431] leading-[28px] mb-[4px]">
                  <div class="text-[20px] font-[600] inline">{{ item.count }}</div>
                  <div class="text-[12px] inline">{{ item.unit }}</div>
                </div>
                <p class="text-[12px] text-[#9da1ad] leading-[14px]">{{ item.label }}</p>
              </div>
            </div>
          </div>
        </Card>
      </el-col>
      <el-col :span="8" class="min-w-[440px]">
        <Card title="待处理订单" class="flex-1 mb-[8px] overflow-hidden">
          <div class="flex justify-center h-[105px]" style="box-shadow: 0px 0px 10px 1px #eff3fe">
            <div
              v-for="(item, key) in handleOrder"
              :key="key"
              class="flex flex-1 items-center relative after:content-[' '] after:absolute after:right-[0] after:w-[1px] after:h-[40px] after:bg-[var(--base-link-color)] px-[16px] last:after:hidden min-w-[153px]"
              @click="gotoOrderPage(item, item.key)"
            >
              <span class="mr-[8px] icon-bg daichuli-icon-bg flex items-center justify-center">
                <svg-icon icon-class="omsdaichuli" class="text-[#fff] text-[16px]" />
              </span>
              <div>
                <div class="text-[#0a1431] leading-[28px] mb-[4px]">
                  <div class="text-[20px] font-[600] inline">{{ item.count }}</div>
                  <div class="text-[12px] inline">{{ item.unit }}</div>
                </div>
                <p class="text-[12px] text-[#9da1ad] leading-[14px]">{{ item.label }}</p>
              </div>
            </div>
          </div>
        </Card>
      </el-col>
    </el-row>

    <el-row :gutter="8" class="aaa">
      <el-col :span="16" class="min-w-[880px]">
        <OrderStati />
      </el-col>

      <el-col :span="8">
        <Card style="width: 100%" class="table-body not-shadow">
          <template #title>
            <div class="tab-title">
              <el-tabs v-model="rankingActive" class="demo-tabs flex-1 w-[90px]" @tab-change="rankingChange">
                <!-- <el-tab-pane label="商品排行" name="goods"></el-tab-pane> -->
                <el-tab-pane label="销售人员" name="sales"></el-tab-pane>
                <el-tab-pane label="店铺排行" name="shop"></el-tab-pane>
              </el-tabs>
              <div class="my-radio-group">
                <div class="item" :class="rankingCycle == 'day' ? 'active' : ''" @click="rankingCycleChange('day')">当天</div>
                <div class="item" :class="rankingCycle == 'week' ? 'active' : ''" @click="rankingCycleChange('week')">近7天</div>
                <div class="item" :class="rankingCycle == 'month' ? 'active' : ''" @click="rankingCycleChange('month')">近30天</div>
              </div>
            </div>
          </template>

          <div class="body-show">
            <el-table :data="rankingtableData" v-if="rankingActive == 'goods'" style="height: 100%">
              <el-table-column prop="ranking" label="排名" width="54" align="center">
                <template #default="{ row }">
                  <span v-if="row.ranking < 4">
                    <img src="@/assets/images/top_1.png" v-if="row.ranking == 1" class="ranking-icon" />
                    <img src="@/assets/images/top_2.png" v-if="row.ranking == 2" class="ranking-icon" />
                    <img src="@/assets/images/top_3.png" v-if="row.ranking == 3" class="ranking-icon" />
                  </span>
                  <span v-else>
                    {{ row.ranking }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="main_img" label="图片" width="80">
                <template #default="{ row }">
                  <el-popover placement="right-start" :width="250" trigger="hover">
                    <img :src="row.main_img" alt="" class="w-[250px]" />
                    <!-- <div class="text-center" @click="openImg(row.main_img)"><el-link type="primary">查看原图</el-link></div> -->
                    <template #reference>
                      <img :src="row.main_img" alt="" class="w-[70px] w-[70px]" />
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="sku" label="SKU" width="86" />
              <el-table-column prop="sku_cn_title" label="产品名称">
                <template #default="{ row }">
                  <el-tooltip class="box-item" effect="dark" placement="top">
                    <template #content>
                      <div style="max-width: 300px">{{ row.sku_cn_title }}</div>
                    </template>
                    <div class="sku-title">{{ row.sku_cn_title }}</div>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column prop="count" label="销量" sortable width="76">
                <template #default="{ row }">
                  {{ row.count?.toLocaleString("en-US") }}
                </template>
              </el-table-column>
              <el-table-column prop="price" label="销售额 USD" sortable width="96">
                <template #header>
                  <div>销售额</div>
                  USD
                </template>
                <template #default="{ row }">
                  {{ row.price?.toLocaleString("en-US") }}
                </template>
              </el-table-column>
            </el-table>

            <el-table :data="rankingtableData" style="height: 100%" v-else-if="rankingActive == 'shop'">
              <el-table-column label="排名" width="54" type="index" align="center">
                <template #default="{ row }">
                  <span v-if="row.ranking < 4">
                    <img src="@/assets/images/top_1.png" v-if="row.ranking == 1" class="ranking-icon" />
                    <img src="@/assets/images/top_2.png" v-if="row.ranking == 2" class="ranking-icon" />
                    <img src="@/assets/images/top_3.png" v-if="row.ranking == 3" class="ranking-icon" />
                  </span>
                  <span v-else>
                    {{ row.ranking }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="shop" label="店铺" />
              <el-table-column prop="shop_manager" label="店铺负责人" />
              <el-table-column prop="count" label="销量" sortable width="76" />
              <el-table-column prop="amount" label="销售额 USD" sortable width="96">
                <template #header>
                  <div>销售额</div>
                  USD
                </template>
              </el-table-column>
              <el-table-column prop="profit" label="总利润 USD" sortable width="96">
                <template #header>
                  <div>总利润</div>
                  USD
                </template>
              </el-table-column>
            </el-table>

            <el-table :data="rankingtableData" style="height: 100%" v-else>
              <el-table-column label="排名" width="54" type="index" align="center">
                <template #default="{ row }">
                  <span v-if="row.ranking < 4">
                    <img src="@/assets/images/top_1.png" v-if="row.ranking == 1" class="ranking-icon" />
                    <img src="@/assets/images/top_2.png" v-if="row.ranking == 2" class="ranking-icon" />
                    <img src="@/assets/images/top_3.png" v-if="row.ranking == 3" class="ranking-icon" />
                  </span>
                  <span v-else>
                    {{ row.ranking }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="sales_name" label="销售人员" />
              <el-table-column prop="department_name" label="销售部门">
                <template #default="{ row }">
                  <VText :value="row.department_name?.[0]" line="2" />
                </template>
              </el-table-column>
              <el-table-column prop="count" label="销量" sortable width="76" />
              <el-table-column prop="income" label="销售额 USD" sortable width="96">
                <template #header>
                  <div>销售额</div>
                  USD
                </template>
              </el-table-column>
            </el-table>
          </div>
        </Card>
      </el-col>
    </el-row>
  </VPage>
</template>
<script name="HomeIndex" setup>
import * as echarts from "echarts"
import { formatDate } from "@/utils"
import Card from "./components/Card/index.vue"

import OrderStati from "./components/OrderStati/index.vue"
const router = useRouter()
import api from "./api/index.js"

// 业绩指标 向左
const onLeft = () => {
  let dome = document.getElementsByClassName("performance-view")[0]
  const sonWidth = dome.getElementsByClassName("son-dom")[0].offsetWidth + 10
  dome.scrollTo({
    left: dome.scrollLeft - sonWidth,
    behavior: "smooth",
  })
}
// 业绩指标 向右
const onRight = () => {
  let dome = document.getElementsByClassName("performance-view")[0]
  const sonWidth = dome.getElementsByClassName("son-dom")[0].offsetWidth + 10
  dome.scrollTo({
    left: dome.scrollLeft + sonWidth,
    behavior: "smooth",
  })
}
// 待发货 待处理订单 跳转订单页
const gotoOrderPage = (item, key = false) => {
  if (key) {
    router.push({
      path: "/user/list",
      state: {
        form: "home",
        type: "order_status",
        key,
      },
    })
  } else {
    router.push({
      path: "/user/list",
      state: {
        form: "home",
        type: "shipping_status",
        date: item.key.charAt(item.key.length - 1),
      },
    })
  }
}

import apiParams from "@/api/tableForm.js"

const getSortConfig = () => {
  apiParams.queryParamsIndex({ scope: "main/home/kpi" }).then((res) => {
    let sortConfig = res.data?.[0]?.params.reverse() || []

    api.kpiUserCenter().then((res) => {
      res.data.forEach((item) => {
        item.start_date = item.start_date.substring(2).split("-").join(".")
        item.end_date = item.end_date.substring(2).split("-").join(".")
         item.sort = `${item.target_type},${item.indicator_type}${item.target_type == 1 ? "," + item.name : ""}`
      })
      res.data = res.data.sort((a, b) => {
        return sortConfig.indexOf(b.sort) - sortConfig.indexOf(a.sort)
      })
      performance.value = res.data
    })
  })
}
// 业绩指标
const performance = ref([])
// 待发货订单
const deliveredOrder = ref()
// 待处理订单
const handleOrder = ref([])

const gotoPage = () => {
  router.push({
    path: "/basic-setup/profit-setting",
  })
}
onMounted(async () => {
  getSortConfig()

  // api.kpiUserCenter().then((res) => {
  //   res.data.forEach((item) => {
  //     item.start_date = item.start_date.substring(2).split("-").join(".")
  //     item.end_date = item.end_date.substring(2).split("-").join(".")
  //   })
  //   performance.value = res.data
  // })
  api.toBeDelivered().then((res) => {
    deliveredOrder.value = res.data
  })
  api.toBeHandle().then((res) => {
    handleOrder.value = res.data
  })

  // 排行
  rankingChange()
})

const rankingActive = ref("sales")
const rankingCycle = ref("day")
const rankingtableData = ref([])
const rankingCycleChange = (e) => {
  rankingCycle.value = e
  rankingChange(rankingActive.value)
}
// 商品 店铺 top
const rankingChange = (e = "sales") => {
  rankingtableData.value = []
  let requestObj = {
    goods: "goodsRanking",
    shop: "shopRanking",
    sales: "salesRanking",
  }
  let request = requestObj[e]
  api[request]({ cycle: rankingCycle.value }).then((res) => {
    res.data.forEach((item, i) => {
      item.ranking = item.ranking || i + 1
    })
    rankingtableData.value = res.data
  })
}
</script>
<style lang="scss" scoped>
.icon-bg {
  width: 24px;
  height: 24px;
  border-radius: 50px;
  background: linear-gradient(270deg, #ff738e 0%, #ffbca2 100%);
  box-shadow: 0px 2px 4px 0px rgba(255, 149, 152, 0.44);
}
.daichuli-icon-bg {
  background: linear-gradient(270deg, #7f7cfc 0%, #b6a0fe 100%);
  box-shadow: 0px 2px 4px 0px rgba(161, 151, 255, 0.44);
}

.performance-view {
  overflow-y: hidden;
  overflow-x: auto;
}
.performance-view::-webkit-scrollbar {
  display: none;
}
.performance-view {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.table-body {
  flex-direction: column;
  height: calc(100vh - 260px);
  display: flex;
  .body-show {
    height: 100%;
    margin: 0 16px;
  }
  &.not-shadow {
    :deep(.card-shadow) {
      box-shadow: none !important;
    }
  }
}

:deep(.tab-title) {
  width: 100%;
  display: flex;
  align-items: center;
  .demo-tabs {
    overflow: hidden;
    display: inline-block;
    .el-tabs__active-bar {
      width: 32px !important;
      margin: 0 10px;
    }
    .el-tabs__header {
      margin-bottom: 1;
    }
    .el-tabs__item {
      padding: 0 10px;
    }
  }
}

.my-radio-group {
  background: var(--base-bg-color);
  display: flex;
  border-radius: 16px;
  padding: 3px;
  float: right;
  z-index: 999;
  .item {
    width: 65px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 13px;
    opacity: 0.87;
  }

  .item.active {
    // background: #eaf3ff;
    opacity: 0.87;
    color: #3487ff;

    background: var(--base-menu-bg-color);
    // border-color: var(--base-menu-bg-color);
  }
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}
</style>

<style lang="scss">
.sku-title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.progress {
  &.progress-red {
    .el-progress-bar__inner {
      background: #ff738e;
    }
  }
  .el-progress-bar__inner {
    background: #00ac76;
  }
}
// .el-table__header {
//   .el-table__cell {
//     // color: #0a1431;
//     // font-family: PingFangSC-Regular, PingFang SC;
//     // font-weight: 400 !important;
//     // color: #0a1431;
//     // background: #f6faff !important;
//   }
// }
.ranking-icon {
  width: 24px;
  height: 24px;
}
.link-btn {
  border: 1px solid;
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 6px;
}
</style>
